<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- 重置样式表 -->
  <link rel="stylesheet" type="text/css" href="./css/reset.css" />
  <!-- 全局 header/footer -->
  <link rel="stylesheet" type="text/css" href="./css/header&footer.css" />
  <!-- 主要内容 -->
  <link rel="stylesheet" type="text/css" href="./css/user_address/user_address.css" />
  <!-- 表单验证插件 -->
  <link rel="stylesheet" type="text/css" href="./lib/Validform_v5.3.2/css/style.css" />
  <title>收货地址</title>
</head>

<body>
  <!-- 全局header -->
  <div class="header">
    <div class="top_nav">
			<div class="container clearfix">
				<!-- 城市定位 -->
				<div class="location relative">
					<a href="javascript:;" class="show_city">
						<div class="city vertical-mid">北京市</div>
						<div class="arrow vertical-mid"></div>
					</a>
					<div class="city_select">
						<div class="title clearfix">
							<span class="text">请选择你所在的收货地区</span>
							<a href="javascript:;" class="fr del"><b>×</b></a>
						</div>
					</div>
				</div>
				<!-- 顶部导航 -->
				<ul class="list fr">
					<li class="login relative">
						<div class="title">
							<a href="login.html" class="user_title">请登录</a>
						</div>
						<div class="login_box">
							<div class="inf clearfix">
								<i class="fl icon_header icon_header_user vertical-mid"></i>
								<a href="login.html">您好！[请登录]</a>
							</div>
							<div class="link">
								<a href="collection.html">我的收藏</a>
								<a href="user_order.html">我的订单</a>
								<a href="user.html">零钱</a>
								<a href="user.html">我的优惠券</a>
								<a href="user.html">我的唯品币</a>
								<a href="user.html">唯品金融</a>
							</div>
						</div>
					</li>
					<li class="register">
						<div class="title">
							<a href="register.html">注册</a>
						</div>
					</li>
					<li class="signIn">
						<div class="title">
							<a href="javascript:;">
								<img src="./img/index/header_gift.gif" class="vertical-mid">
								<span class="vertical-mid">签到有礼</span>
							</a>
						</div>
					</li>
					<li class="myOrder">
						<div class="title">
							<a href="user_order.html">我的订单</a>
						</div>
					</li>
					<li class="specialSale relative pull_down">
						<div class="title">
							<a href="collection.html">
								<span class="vertical-mid">我的特卖</span>
								<i class="arrow vertical-mid"></i>
							</a>
						</div>
						<div class="box">
							<a href="collection.html">商品收藏</a>
							<a href="collection.html">品牌收藏</a>
							<a href="collection.html">我的足迹</a>
						</div>
					</li>
					<li class="member relative pull_down">
						<div class="title">
							<a href="user.html">
								<span class="vertical-mid">会员俱乐部</span>
								<i class="arrow vertical-mid"></i>
							</a>
						</div>
						<div class="box">
							<a href="user.html">俱乐部首页</a>
							<a href="user.html">唯品币兑换</a>
						</div>
					</li>
					<li class="service relative pull_down">
						<div class="title">
							<a href="user.html">
								<span class="vertical-mid">客户服务</span>
								<i class="arrow vertical-mid"></i>
							</a>
						</div>
						<div class="box">
							<a href="user.html">联系客服</a>
							<a href="user.html">帮助中心</a>
							<a href="user.html">服务中心</a>
							<a href="user.html">知识产权投诉</a>
						</div>
					</li>
					<li class="mobileCode relative">
						<div class="title">
							<a href="javascript:;">
								<i class="icon_header icon_header_mobileCode vertical-mid"></i>
								<span class="vertical-mid">手机版</span>
							</a>
						</div>
						<div class="box">
							<img src="./img/index/code.jpg">
							<a href="#" class="text">随时逛，及时抢</a>
						</div>
					</li>
					<li class="more relative">
						<div class="title">
							<a href="javascript:;">
								<span class="vertical-mid">更多</span>
								<i class="arrow vertical-mid"></i>
							</a>
						</div>
						<div class="box">
							<div class="cooperation">
								<span>合作专区</span>
								<a href="user.html">唯品卡</a>
							</div>
							<div class="about_us">
								<span>关于我们</span>
								<a href="user.html">Sell on vip</a>
								<a href="user.html">品牌招商</a>
								<a href="user.html">官方博客</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- LOGO 标语 搜索框 购物车 -->
		<div class="top_content">
			<div class="container clearfix">
				<div class="logo fl">
					<a href="index.html"><img src="./img/index/header_logo.gif"></a>
				</div>
				<div class="slogan fl">
					<a href="user.html"><i class="icon_header icon_header_slogan1"></i></a>
					<a href="user.html"><i class="icon_header icon_header_slogan2"></i></a>
					<a href="user.html"><i class="icon_header icon_header_slogan3"></i></a>
				</div>
				<div class="search fl relative">
					<div class="input_box relative">
						<input type="text" name="keyword" class="input" id="input" value="" placeholder="快抢商品" />
						<a href="goods_search.html" class="search_btn"><img src="./img/index/search_btn.png"></a>
					</div>
					<ul class="hot_keyword">
						<li><a href="goods_search.html">护肤套装</a></li>
						<li><a href="goods_search.html">手机</a></li>
						<li><a href="goods_search.html">欧莱雅Loreal</a></li>
						<li><a href="goods_search.html">面部精华</a></li>
						<li><a href="goods_search.html">面膜</a></li>
						<li><a href="goods_search.html">爽肤水</a></li>
					</ul>
					<div class="pullDown clearfix">
						<div class="history fl">搜索历史</div>
						<div class="recommend fl">
							<span class="title">精选推荐</span>
							<a href="goods_search.html">护肤套装</a>
							<a href="goods_search.html">手机</a>
							<a href="goods_search.html">欧莱雅Loreal</a>
							<a href="goods_search.html">面部精华</a>
							<a href="goods_search.html">面膜</a>
							<a href="goods_search.html">女式外套</a>
							<a href="goods_search.html">女式衬衫</a>
							<a href="goods_search.html">爽肤水</a>
							<a href="goods_search.html">周生生</a>
							<a href="goods_search.html">女羽绒服</a>
						</div>
					</div>
				</div>
				<div class="shoppingCart fl relative">
					<a href="shopping_cart.html" class="title">
						<i class="icon_header icon_header_shoppingCart vertical-mid"></i>
						<span class="text vertical-mid">购物袋</span>
						<span class="number vertical-mid">0</span>
					</a>
					<div class="box">
						<span>好像还未登录！<a href="login.html" class="link">马上登录</a> 查看购物袋吧！</span>
					</div>
				</div>
			</div>
		</div>
  </div>

  <!-- 横向标题 -->
  <div class="levelTitle">
    <div class="levelTitle_bg clearfix">
      <div class="container">
        <div class="levelTitle_left fl clearfix">
          <a class="fl" href="user.html">我的开课吧</a>
          <a class="fl" href="#">安全中心</a>
        </div>
        <div class="levelTitle_right fr clearfix">
          <a class="fl" href="#">分类</a>
          <a class="fl" href="#">预告</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 主内容 -->
  <div class="user_center_bg">
    <div class="user_center">
      <div class="container">
        <div class="swiper_con clearfix">
          <!-- 左侧目录 -->
          <div class="catalog fl">
            <div class="deal">
              <div class="title">
                <i class="icon_user icon_user_close"></i>
                <span>我的交易</span>
              </div>
              <ul>
                <li><a href="user_order.html">订单管理</a></li>
                <li><a href="#">退换/售后</a></li>
                <li><a href="user_address.html">收货地址</a></li>
              </ul>
            </div>
            <div class="asset">
              <div class="title">
                <i class="icon_user icon_user_close"></i>
                <span>我的资产</span>
              </div>
              <ul>
                <li><a href="#">零钱</a></li>
                <li><a href="#">唯品金融</a></li>
                <li><a href="#">银行卡</a></li>
                <li><a href="#">联名卡</a></li>
                <li><a href="#">唯品卡</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">唯品币</a></li>
              </ul>
            </div>
            <div class="account">
              <div class="title">
                <i class="icon_user icon_user_close"></i>
                <span>我的账户</span>
              </div>
              <ul>
                <li><a href="user.html">我的资料</a></li>
                <li><a href="#">分享账号</a></li>
              </ul>
            </div>
          </div>

          <!-- -------------------主要内容/操作---------------- -->
          <div class="content fl">
            <div class="catalog_src relative">
              <a href="user.html">我的开课吧</a>
              <span> &gt; 收货地址</span>
            </div>
            <!-- 已保存的收货地址 -->
            <div class="save_box">
              <div class="title clearfix">
                <span>已经保存的收货地址</span>
                <span>您已经创建 </span>
                <span class="now_num">2</span>
                <span> 个收货地址，最多可创建 </span>
                <span class="reside_num">10</span>
                <span>个</span>
                <button class="fr" type="button" id="add_new">新增收货地址</button>
              </div>
              <ul class="address_box ">
                <li class="relative isDefault" data-msg="">
                  <div class="item">
                    <div class="default">默认地址</div>
                    <div class="name">
                      <img class="vertical-mid" src="./img/user_address/name_address.png" alt="">
                      <span class="vertical-mid">李华</span>
                    </div>
                    <div class="location">
                      <img class="vertical-mid" src="./img/user_address/location_address.png" alt="">
                      <span class="vertical-mid">
                        <span class="province">山东省</span>
                        <span class="city">青岛市</span>
                        <span class="district">市南区</span>
                        <span class="detail_address">香港中路</span>
                      </span>
                    </div>
                    <div class="tel">
                      <img class="vertical-mid" src="./img/user_address/tel_address.png" alt="">
                      <span class="vertical-mid">18888888888</span>
                    </div>
                    <div class="btn">
                      <button type="button" id="edit">修改</button>
                      <button type="button" id="del">删除</button>
                    </div>
                  </div>
                </li>
                <li class="relative"
                  data-msg="">
                  <div class="item">
                    <div class="default">默认地址</div>
                    <div class="name">
                      <img class="vertical-mid" src="./img/user_address/name_address.png" alt="">
                      <span class="vertical-mid">张麻子</span>
                    </div>
                    <div class="location">
                      <img class="vertical-mid" src="./img/user_address/location_address.png" alt="">
                      <span class="vertical-mid">
                        <span class="province">山东省</span>
                        <span class="city">烟台市</span>
                        <span class="district">芝罘区</span>
                        <span class="detail_address">南大街</span>
                      </span>
                    </div>
                    <div class="tel">
                      <img class="vertical-mid" src="./img/user_address/tel_address.png" alt="">
                      <span class="vertical-mid">16666666666</span>
                    </div>
                    <div class="btn">
                      <button type="button" id="edit">修改</button>
                      <button type="button" id="del">删除</button>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 编辑地址/新增地址 -->
            <div class="input_box editTop">
              <div class="title">新增收货地址</div>
              <form class="edit_box form" id="form">
                <!-- 收货人 -->
                <div class="name item clearfix relative">
                  <div class="tip fl vertical-mid">
                    <span>*</span>
                    <span>收货人：</span>
                  </div>
                  <input class="fl vertical-mid" type="text" id="name" datatype="s" nullmsg="请输入收货人姓名"
                    errormsg="收货人姓名只支持中文" placeholder="收货人姓名">
                  <div class="error-tip"><img src="./img/user_address/tips_error.png" alt=""></div>
                </div>
                <!-- 手机号 -->
                <div class="tel item clearfix relative">
                  <div class="tip fl vertical-mid">
                    <span>*</span>
                    <span>手机号：</span>
                  </div>
                  <input class="fl vertical-mid" type="text" id="name" datatype="m" nullmsg=" 请输入收货人手机号"
                    errormsg="手机格式不正确" placeholder="手机号">
                  <div class="error-tip"></div>
                </div>
                <!-- 收货时间 -->
                <div class="time item clearfix relative">
                  <div class="tip fl vertical-mid">
                    <span>*</span>
                    <span>收货时间：</span>
                  </div>
                  <select class="time_sel vertical-mid">
                    <option  value="allday">周一至周日均可收货</option>
                    <option value="holiday">周六日、节假日收货</option>
                    <option value="weekday">周一至周五收货</option>
                  </select>
                </div>
                <!-- 所在地区 -->
                <div class="city item clearfix relative">
                  <div class="tip fl vertical-mid">
                    <span>*</span>
                    <span>所在地区：</span>
                  </div>
                  <div id="target" class="city_sel" data-toggle="distpicker">
                    <select id="province"></select>
                    <select id="city"></select>
                    <select id="district"></select>
                  </div>
                </div>
                <!-- 详细地址 -->
                <div class="detail_address item clearfix relative">
                  <div class="tip fl vertical-mid">
                    <span>*</span>
                    <span>详细地址：</span>
                  </div>
                  <input class="fl vertical-mid" type="text" id="name" datatype="s" nullmsg="请填写完整的地址信息"
                    placeholder="详细地址">
                  <div class="error-tip"></div>
                </div>
                <!-- 地址类型 -->
                <div class="type item clearfix relative">
                  <div class="tip fl vertical-mid">
                    <span>*</span>
                    <span>地址类型：</span>
                  </div>
                  <div class="check_box vertical-mid">
                    <input class="vertical-mid" type="radio" class="address_type" name="type" value="1" />
                    <span class="vertical-mid home">家庭</span>
                    <input class="vertical-mid" type="radio" class="address_type" name="type" value="2" />
                    <span class="vertical-mid company">公司</span>
                    <input class="vertical-mid" type="radio" class="address_type" name="type" value="3" />
                    <span class="vertical-mid rests">其他</span>
                  </div>
                </div>
                <!-- 设为默认地址 -->
                <div class="setDefault item clearfix relative">
                  <div class="tip fl vertical-mid"></div>
                  <input class="vertical-mid" type="checkbox" /><span class="vertical-mid">设为默认地址</span>
                </div>
                <!-- 保存 取消 -->
                <div class="btn item clearfix">
                  <div class="tip fl vertical-mid"></div>
                  <button type="submit" id="save">保存</button>
                  <button type="button" id="cancel">取消</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>




  <!-- 全局footer -->
  <div class="footer">
    <div class="container">
      <div class="slogan">
        <i class="icon_footer icon_footer_slogan01"></i>
        <i class="icon_footer icon_footer_slogan02"></i>
        <i class="icon_footer icon_footer_slogan03"></i>
        <i class="icon_footer icon_footer_slogan04"></i>
        <i class="icon_footer icon_footer_slogan05"></i>
        <i class="icon_footer icon_footer_slogan06"></i>
        <i class="icon_footer icon_footer_slogan07"></i>
        <i class="icon_footer icon_footer_slogan08"></i>
        <i class="icon_footer icon_footer_slogan09"></i>
        <i class="icon_footer icon_footer_slogan10"></i>
      </div>
      <div class="link">
        <div class="item vertical-top">
          <span class="title">服务保障</span>
          <ul>
            <li><a href="#">正品保证</a></li>
            <li><a href="#">7天无理由放心退</a></li>
            <li><a href="#">退货返10元唯品币</a></li>
            <li><a href="#">7x15小时客户服务</a></li>
            <li><a href="#">7天无理由随心换</a></li>
          </ul>
        </div>
        <div class="item vertical-top">
          <span class="title">购物指南</span>
          <ul>
            <li><a href="#">导购演示</a></li>
            <li><a href="#">订单操作</a></li>
            <li><a href="#">会员注册</a></li>
            <li><a href="#">账户管理</a></li>
            <li><a href="#">收货样品</a></li>
            <li><a href="#">会员等级</a></li>
          </ul>
        </div>
        <div class="item vertical-top">
          <span class="title">支付方式</span>
          <ul>
            <li><a href="#">快捷支付</a></li>
            <li><a href="#">23家主流网银支付</a></li>
            <li><a href="#">支付宝、银联等支付</a></li>
            <li><a href="#">信用卡支付</a></li>
            <li><a href="#">零钱支付</a></li>
          </ul>
        </div>
        <div class="item vertical-top">
          <span class="title">配送方式</span>
          <ul>
            <li><a href="#">配送范围及运费</a></li>
            <li><a href="#">验货与签收</a></li>
          </ul>
        </div>
        <div class="item vertical-top">
          <span class="title">售后服务</span>
          <ul>
            <li><a href="#">退货政策</a></li>
            <li><a href="#">退货流程</a></li>
            <li><a href="#">退款方式和时效</a></li>
            <li><a href="#">换货服务</a></li>
          </ul>
        </div>
        <div class="code vertical-top">
          <span class="title">开课吧APP二维码</span>
          <img src="./img/index/footer_code.png">
          <span class="des">下载开课吧移动APP</span>
        </div>
      </div>
      <div class="about">
        <ul>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Investor Relations</a></li>
          <li><a href="#">媒体报道</a></li>
          <li><a href="#">品牌招商</a></li>
          <li><a href="#">隐私条款</a></li>
          <li><a href="#">慧科诚聘</a></li>
          <li><a href="#">开课卡</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </div>
 <div class="Copyright">Copyright 2003-2020 kaikeba.com，All Rights Reserved 使用本网站即表示接受 <a href="#">开课吧用户协议</a>。版权所有
				<a href="#">北京开课吧电子商务有限公司</a> </div>
			<div class="put_on_records">
				<span><a href="#" class="vertical-mid"><img src="./img/index/police_icon.png" class="vertical-mid">京公网安备
						xxxxxxxxxxxxxxx号</a> <a href="#">京ICP备xxxxxxxx号</a> <a href="#">增值业务经营许可证：京B2-20200000</a> <a
						href="#">网络文化经营许可证：京网文〔2020〕5030-1743号</a>
				</span>
				<span><a href="#">自营主体经营证照</a> <a href="#">风险监测信息</a> <a href="#">互联网药品信息服务资格证书：（京）-经营性-2020-0271</a> <a
						href="#">网络食品交易第三方平台备案凭证：京B2-20200000</a>
					<a href="#">医疗器械网络交易服务第三方平台</a></span>
				<span><a href="#">备案凭证：（京）网械平台备字[2020]第00001号</a></span>
			</div>
      <div class="identification">
        <a href="#"><i class="icon_identification icon_identification_Unionpay"></i></a>
        <!-- <a href="#"><i class="icon_identification icon_identification_Alipay"></i></a>
					<a href="#"><i class="icon_identification icon_identification_CreditEnterprise"></i></a> -->
        <a href="#"><i class="icon_identification icon_identification_LegalRights"></i></a>
        <a href="#"><i class="icon_identification icon_identification_RedLink"></i></a>
        <a href="#"><i class="icon_identification icon_identification_callPolice"></i></a>
        <a href="#"><i class="icon_identification icon_identification_netPolice"></i></a>
        <!-- <a href="#"><i class="icon_identification icon_identification_ccredit"></i></a> -->
        <a href="#"><i class="icon_identification icon_identification_integrityWeb"></i></a>
        <a href="#"><i class="icon_identification icon_identification_credibleWeb"></i></a>
      </div>
    </div>
  </div>
  <!-- 引入jQuery -->
  <script src="./js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
  <!-- 全局header、footer----修改：nav不固定 -->
  <script src="./js/user/header&footer_user.js" type="text/javascript" charset="utf-8"></script>
  <!-- 当前页面 -->
  <script src="./js/user_address/user_address.js" type="text/javascript" charset="utf-8"></script>
  <!-- 收货地址 -->
  <script src="./lib/jQueryAddress-3thLinkage/js/distpicker.data.js"></script>
  <script src="./lib/jQueryAddress-3thLinkage/dist/distpicker.min.js"></script>
  <script src="./lib/jQueryAddress-3thLinkage/js/main.js"></script>
  <!-- Validform插件js -->
  <script src="./lib/Validform_v5.3.2/js/Validform_v5.3.2_min.js" type="text/javascript" charset="utf-8"></script>
  <!-- Layer插件 -->
  <script src="./lib/layer-v3.1.1/layer/layer.js"></script>
</body>

</html>